import {
    PostCaseComment,
    GetCaseCommentList,
    SetTaskScore,
    GetCaseCommentReply,
    DelCaseComment,
} from "@/api";
import emojiList from "@/config/emoji.js";

export const useContent = () => {
    const comment = ref("");
    const dialogStore = useDialogStore();
    const userDialog = useUserStore();
    const router = useRouter();
    const isBtnLoading = ref(false);
    const isPageLoading = ref(false);
    const CommentList = ref([]);

    const isShowDeleteDialog = ref(false);
    const delType = ref(1);
    const delCommentItem = ref(null);
    const delReplyItem = ref(null);
    const delReplyIndex = ref(null);

    const onClose = () => {
        dialogStore.isCaseCommentListDialogVisible = false;
    };

    const onSend = async () => {
        if (userDialog.isLogin) {
            const commentCaseId = dialogStore.commentCaseId;
            if (!commentCaseId) Message().warning("操作异常!");
            else if (!comment.value.trim()) Message().warning("请输入评论内容");
            else {
                isBtnLoading.value = true;
                const res = await PostCaseComment({
                    examcase_id: commentCaseId,
                    comment: comment.value,
                });
                isBtnLoading.value = false;
                if (res.code == 200) {
                    GetList(false);
                    SetTaskScore({
                        code: 1016,
                        _id: commentCaseId,
                    });
                    comment.value = "";
                    Message().success("评论成功！");
                } else {
                    Message().warning(res.msg);
                }
            }
        } else {
            LoginModal();
        }
    };

    const GetList = async (loading = true) => {
        loading && (isPageLoading.value = true);
        const res = await GetCaseCommentList({
            examcase_id: dialogStore.commentCaseId,
        });
        loading && (isPageLoading.value = false);
        CommentList.value = res.data;
    };

    const GetReply = async (index) => {
        const item = CommentList.value[index];
        const res = await GetCaseCommentReply({
            examcase_id: item.examcase_id,
            comment_id: item.id,
        });
        if (res.code == 200) {
            CommentList.value[index].reply = res.data;
        }
    };

    router.beforeEach(() => {
        dialogStore.isCaseCommentListDialogVisible = false;
    });

    watch(
        () => dialogStore.isCaseCommentListDialogVisible,
        () => {
            if (dialogStore.isCaseCommentListDialogVisible) {
                GetList(true);
            } else {
                comment.value = "";
                CommentList.value = [];
                isBtnLoading.value = false;
            }
        }
    );

    const onSelectEmoji = (name) => {
        comment.value += `[${name}]`;
    };

    const formatComment = (commentStr) => {
        for (let emoji of emojiList) {
            const reg = new RegExp(`\\[${emoji}\\]`, "g");
            commentStr = commentStr.replace(
                reg,
                `<img emoji-icon src='${_oss_}images/emoji/${emoji}.gif' />`
            );
        }
        return commentStr;
    };

    const onDelComment = async (item) => {
        delCommentItem.value = item;
        isShowDeleteDialog.value = true;
        delType.value = 1;
    };

    const onDelReply = async (item, index) => {
        delType.value = 2;
        delReplyItem.value = item;
        delReplyIndex.value = index;
        isShowDeleteDialog.value = true;
    };

    const onDeleteConfirm = async () => {
        let params = {};
        if (delType.value == 1) {
            params["comment_id"] = delCommentItem.value.id;
            params["examcase_id"] = delCommentItem.value.examcase_id;
        } else if (delType.value == 2) {
            params["reply_id"] = delReplyItem.value.id;
            params["examcase_id"] = delReplyItem.value.examcase_id;
        }

        const res = await DelCaseComment(params);

        if (res.code == 200) {
            if (delType.value == 1) {
                GetList(false);
            } else if (delType.value == 2) {
                GetReply(delReplyIndex.value);
            }
            Message().success("删除成功！");
        } else {
            Message().warning(res.msg);
        }
    };

    return {
        isShowDeleteDialog,
        isBtnLoading,
        isPageLoading,
        comment,
        CommentList,
        formatComment,
        onClose,
        onSend,
        onSelectEmoji,
        GetReply,
        onDelComment,
        onDeleteConfirm,
        onDelReply,
        GetList,
    };
};
